<template>
  <div class="index-container">
    <div class="main-header clearfix">
      <el-row>
       <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-button type="primary"  icon="el-icon-plus" class="sureBtn"  size="medium"  @click="handleAdd" > 添加药品入库</el-button>
        </el-col>
        <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
         <div class="search fr">
             <div>
               <el-input  v-model="searchForm.title" size="medium"  placeholder="老人姓名"></el-input>
             </div>
             <div>
               <el-input  v-model="searchForm.code" size="medium"  placeholder="批准文号"></el-input>
             </div>
             <div>
              <el-select v-model="searchForm.stock" clearable placeholder="库存" filterable size="medium"  style="width: 100%;">
                <el-option label="正常" value="1"></el-option>
                <el-option label="无库存" value="2"></el-option>
              </el-select>
             </div>
             <div style="margin-right: 5px;">
               <el-checkbox v-model="searchForm.guoqi" true-label="1">即将过期药品</el-checkbox>
             </div>
             <el-button size="medium"   type="primary"   icon="el-icon-search"  class="fr"    @click="handleSearch" > 搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-content" style="height: calc(100vh - 250px);">
      <main-table
        :columns="tableColumns"
        :data="tableList"
        :loading="loading"
        :pagination="pagination"
        wrapper-height="calc(100% - 73px)"
        height="100%" @getData="fetchTableList"
      >
      <el-table-column slot="status" label="状态" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </el-table-column>

       <el-table-column slot="inventoryAction" fixed="right" label="库存操作" width="200">
         <template slot-scope="scope">
           <el-button size="mini" type="primary" @click="stocklog(scope.row)">库存记录</el-button>
           <el-button size="mini" type="success" @click="modifystock(scope.row)">调整库存</el-button>
         </template>
       </el-table-column>

       <el-table-column slot="action" fixed="right" label="操作" width="250">
         <template slot-scope="s
           <el-button size="mini" type="success" @click="edit(scope.row)">编辑/查看</el-button>
           <el-button size="mini" type="primary" @click="damaged(scope.row)">损耗</el-button>
           <el-button size="mini" type="danger" @click="cancelOrder(scope.row)">删除</el-button>
         </template>
       </el-table-column>

      </main-table>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="700px">
      <medicine-add v-if="dialogVisible" :data="ruleForm" @cancle="dialogVisible = false" @load="load"></medicine-add>
    </el-dialog>

    <!-- 库存记录 -->
    <el-drawer title="库存记录" size="80%" :visible.sync="dialogStocklogVisible" :destroy-on-close="true" :wrapper-closable="false" :with-header="false" direction="rtl" @close="dialogStocklogVisible = false">
      <medicine-stocklog :data="ruleForm" @cancle="dialogStocklogVisible = false"></medicine-stocklog>
    </el-drawer>

    <el-dialog
      title="调整库存"
      :visible.sync="dialogModifystockVisible"
      :close-on-click-modal="false"
      width="700px">
      <medicine-modifystock v-if="dialogModifystockVisible" :data="ruleForm" @cancle="dialogModifystockVisible = false" @load="load"></medicine-modifystock>
    </el-dialog>

    <el-dialog
      title="损耗记录"
      :visible.sync="dialogDamagedVisible"
      :close-on-click-modal="false"
      width="700px">
      <medicine-damaged v-if="dialogDamagedVisible" :data="ruleForm" @cancle="dialogDamagedVisible = false" @load="load"></medicine-damaged>
    </el-dialog>

  </div>
</template>
<script>
  import mainTable from "@/components/main-table/index";
  import * as APIMedicalCare from '@/api/medicalCare';
  import medicineAdd from './components/medicine-add';
  import medicineStocklog from './components/stocklog';
  import medicineModifystock from './components/modifystock';
  import medicineDamaged from './components/damaged'

  // import appMap from "@/components/AppMap/golde";
  import { sex, age, elderlyCategory, sourceType, unixToDate } from "@/utils";
  export default {
    name: "MedicineDrugInput",
    components: {
      mainTable,
      // appMap,
      medicineAdd,
      medicineStocklog,
      medicineModifystock,
      medicineDamaged
    },
    data() {
      return {
        loading: false,
        title: '添加图标',
        dialogVisible: false,
        dialogStocklogVisible: false,   // 库存记录
        dialogModifystockVisible: false,  // 调整库存
        dialogDamagedVisible: false,  // 损耗
        ruleForm: {},
        searchForm: {
           page: 1
        },
        tableList:[],
        pagination: {
          current: 1,
          size: 10,
          total: 0
        },
        tableColumns: [
         {
           index: true,
           fixed: true
         },
         {
           prop: 'title',
           label: '药品名称',
           width: 190,
         },
         {
           prop: 'code',
           label: '批准文号'
         },
         {
           prop: 'quantity',
           label: '库存'
         },
         {
           prop: 'spec',
           label: '规格'
         },
         {
           prop: 'unit',
           label: '单位'
         },
         {
           prop: 'supplier',
           label: '生产商'
         },
         {
           prop: 'cost_price',
           label: '进价'
         },
         {
           prop: 'sell_price',
           label: '售价'
         },
         {
           prop: 'status',
           label: '状态',
           slot: 'status'
         },
         {
           prop: 'over_time',
           label: '过期时间',
           width: 120,
           formatter (row, column, cellValue) {
             if(cellValue){
               return unixToDate(cellValue, 'yyyy-MM-dd')
             } else {
               return '无'
             }
           }
         },
         {
           prop: 'create_time',
           label: '添加时间',
           width: 190,
           formatter (row, column, cellValue) {
             return unixToDate(cellValue)
           }
         },
         {
           slot: 'inventoryAction'
         },
         {
           slot: 'action'
         }
        ],
        key: Math.random(),
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.fetchTableList();
    },
    methods: {
      load () {
        this.fetchTableList()
      },
      // 手动清空/搜索
      clear () {
        this.fetchTableList({ page: 1 })
      },
      handleSearch() {
        this.pagination = {
          current: 1,
          size: 10,
          total: 0
        }
        this.fetchTableList({ page: 1 })
      },
      fetchTableList(pageObj) {
        this.loading = true
        this.searchForm = {
          ...this.searchForm,
          ...pageObj
        }
        APIMedicalCare.medicineIndex(this.searchForm).then((resp) => {
          if (resp.code == 200) {
            const { list = [], total = 0 } = resp.data;
            this.tableList = list || []
            this.pagination.total = total;
          }
        }).finally(() => {
         this.loading = false
        });
      },
      edit (row) {
        this.title = '编辑药品入库';
        this.key = Math.random();
        this.ruleForm = { ...row};
        this.dialogVisible = true
      },
      handleAdd() {
        this.title = '添加药品入库';
        this.dialogVisible = true;
        this.key = Math.random();
        this.ruleForm = { m_type:'1', u_type: '1', u_func: '1', ratio:'',status: '1' };
      },
      stocklog(row){
        this.ruleForm = { ...row };
        this.dialogStocklogVisible = true;
      },
      modifystock(row){
        this.ruleForm = { ...row };
        this.dialogModifystockVisible = true;
      },
      damaged(row){
        this.ruleForm = { ...row };
        this.dialogDamagedVisible = true;
      },
      cancelOrder(row) {
        this.$confirm("确定删除该条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            APIMedicalCare.medicineDelete({ id: row.id }).then((resp) => {
              if (resp.code === 200) {
                this.$message({ type: "success", message: "删除成功!"});
                this.fetchTableList();
              }
            });
          })
          .catch(() => {
          });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px !important;
    margin: 0 !important;
    background: #fff !important;

    .main-header {
      padding-top: 4px;
      margin-bottom: 24px;

      .search {
        display: inline-block;

        .search-title {
          flex: 0 0 48px;
          width: 48px;
          font-size: 16px;
          line-height: 36px;
          color: #333;
        }
      }

      .search > div {
        display: inline-block;
        margin-left: 20px;
      }
    }
    .task-icon-img{
      width: 80px;
      height: 80px;
    }
  }

  .form-footer {
    padding-left: 100px;
  }

  .dialog-main {
    .table-do {
      margin-bottom: 15px;
    }

    ::v-deep {
      th {
        .cell {
          color: #fff;
        }
      }
    }
  }
</style>
